import React, { PureComponent } from 'react'
import CommentInput from './components/CommentInput'
import CommentItem from './components/CommentItem'


export default class App extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      commentList: [],
    }
  }

  render() {
    return (
      <div style={{ width: "500px" }}>
        {
          this.state.commentList.map((item, index) => {
            return (
              <CommentItem
                comment={item}
                key={index}
                removeComment={e => this.removeComment(index)}></CommentItem>
            )
          })
        }

        <CommentInput submitComment={this.submitComment.bind(this)}></CommentInput>
      </div>
    )
  }

  submitComment(info) {
    this.setState({
      commentList: [...this.state.commentList, info]
    })
  }

  removeComment(index) {
    const newCommentList = [...this.state.commentList]
    newCommentList.splice(index, 1)
    this.setState({
      commentList: newCommentList
    })
  }

}
